<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui">
    <title>禅林瑜伽会员查询</title>
    <link rel="icon" href="./../images/favico.ico">
    <!--element-ui的样式-->
    <link rel="stylesheet" href="../../backend/plugins/element-ui/index.css" />
    <!-- 引入样式  -->
    <link rel="stylesheet" href="../styles/index.css" />
    <!--引入vant样式-->
    <link rel="stylesheet" href="../styles/vant.min.css"/>
    <!--本页面内容的样式-->
    <link rel="stylesheet" href="./../styles/user.css" />
</head>
<style>
    .text {
      font-size: 14px;
    }
  
    .item {
      margin-bottom: 18px;
    }
  
    .clearfix:before,
    .clearfix:after {
      display: table;
      content: "";
    }
    .clearfix:after {
      clear: both
    }
  
    .box-card {
        margin: 0 auto;
      width: 99%;
      font-size: 18px;
    }
  </style>
<body>
    <div id="user" class="app">
        <div class="divHead">
            <div class="divTitle">
                <i class="el-icon-arrow-left" @click="goBack"></i>个人中心
            </div>
            <div class="divUser">
                <img src="./../images/headPage.png"/>
                <div class="desc">
                    <div class="divName">{{member.name}}</div>
                    <div class="divPhone">{{member.phone}}</div>
                </div>

            </div>
            
        </div>
        <div class="divContent">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>会员卡片</span>
                    <el-button style="float: right; padding: 3px 0" type="text">时间卡</el-button>
                </div>
                <div>会员状态：
                        <el-tag v-if="member.guoqi == '1'" type="success">未过期</el-tag>
                        <el-tag v-if="member.guoqi == '0'" type="danger">已过期</el-tag>
                </div>
                <div>会员开始日期：{{member.startTime}}</div>
                <div>会员过期时间：{{member.stopTime}}</div>
            </el-card>
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>会员卡片</span>
                    <el-button style="float: right; padding: 3px 0" type="text">次卡</el-button>
                </div>
                <div style="font-size: 18px">会员次卡剩余：
                        <el-tag v-if="member.countCard > 0" type="success">{{member.countCard}}次</el-tag>
                        <el-tag v-if="member.countCard <= 0" type="danger">次卡无次数</el-tag>
                </div>
                <div style="font-size: 18px">会员次卡过期状态：
                    <el-tag v-if="new Date(member.cardStopdate) > new Date()" type="success">次卡正常</el-tag>
                    <el-tag v-if="new Date(member.cardStopdate) < new Date()" type="danger">次卡已过期</el-tag>
                </div>
                <div>会员开始日期：{{member.cardStartdate}}</div>
                <div>会员过期时间：{{member.cardStopdate}}</div>
            </el-card>
        </div>
            
            <div class="quitLogin" @click="toPageLogin">
                退出登录
            </div>
        </div>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="../../backend/plugins/vue/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="../../backend/plugins/element-ui/index.js"></script>
    <!-- 引入vant组件 -->
    <script src="./../js/vant.min.js"></script>    
    <!--不同屏幕尺寸根字体设置-->
    <script src="./../js/base.js"></script>
    <!-- 引入axios -->
    <script src="../../backend/plugins/axios/axios.min.js"></script>
    <script src="./../js/request.js"></script>
    <script src="./../api/login.js"></script>
    <script>
        new Vue({
            el:"#user",
            data(){
                return {
                    member:{},
                    form:{
                        phone:'151111111112',
                        code:'123123'
                    },
                    msgFlag:false,
                    nowDate:false
                }
            },
            computed:{},
            created(){
                this.userPhone =sessionStorage.getItem("userPhone");
            //    获取用户信息
                this.getUser()
            },
            mounted(){},
            methods:{
                getUser(){
                    getUserMate({phone:this.userPhone}).then(res=>{
                        this.member = res.data;
                        this.daoqizhuangtai(this.member.stopTime);
                        // alert(this.user);
                    });
                },
                daoqizhuangtai(datestr){
                    let stopTime = new Date(datestr);
                    let currentTime = new Date();
                    if(stopTime > currentTime){
                        this.member.guoqi='1';
                    }else{
                        this.member.guoqi='0';
                    }
                },
                daoqizhuangtai2(datestr){
                    let stopTime = new Date(datestr);
                    let currentTime = new Date();
                    if(stopTime > currentTime){
                        this.member.guoqi='1';
                    }else{
                        this.member.guoqi='0';
                    }
                },

                goBack(){
                    history.go(-1)
                },
                
                async toPageLogin(){
                    const res = await loginoutApi()
                    if(res.code === 1){
                        window.requestAnimationFrame(()=>{
                            window.location.href = '/front/page/login.html'
                        }) 
                    }else{
                        this.$notify({ type:'warning', message:res.msg});
                    }                
                }
            }
        })
    </script>
</body>
</html>